<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>数据字典</title>
    <link rel="stylesheet" href="./layui/css/layui.css" th:href="@{/layui/css/layui.css}">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div th:replace="~{common/navbar::navbar}"></div>

    <div th:replace="~{common/sidebar::sidebar}"></div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-hide">
            <input type="text" id="msg" th:value="${msg}">
            <input type="text" id="code" th:value="${code}">
        </div>
        <table id="demo" lay-filter="test"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
        </script>
    </div>
</div>
<script src="./layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script src="./js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    // 信息显示
    let msg = $("#msg").val();
    let code = $("#code").val();
    if (msg != null && msg !== '') {
        layer.msg(msg, {icon: code});
    }

    // 侧边栏class赋值
    $("div.layui-side dl.layui-nav-child dd").eq(0).addClass("layui-this")

    // layui部分
    layui.use(function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var $ = layui.jquery;

        function add() {
            layer.open({
                title: '添加',
                type: 1,
                area: ['80%', '80%'],
                content: '<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">\n' +
                    '    <legend>添加数据字典</legend>\n' +
                    '</fieldset>\n' +
                    '\n' +
                    '<form class="layui-form" action="/dict/add" method="post">\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">字典名称</label>\n' +
                    '        <div class="layui-input-inline">\n' +
                    '            <input type="text" name="dictName" lay-verify="required" lay-reqtext="字典名称是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">字典编码</label>\n' +
                    '        <div class="layui-input-inline">\n' +
                    '            <input type="text" name="dictCode" lay-verify="required" lay-reqtext="字典编码是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">字典描述</label>\n' +
                    '        <div class="layui-input-inline">\n' +
                    '            <input type="text" name="dictDesc" autocomplete="off" class="layui-input">\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <div class="layui-input-block">\n' +
                    '            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>\n' +
                    '            <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '</form>'
            });
        }

        function update(checkStatus, data) {
            layer.open({
                title: '修改',
                type: 1,
                area: ['80%', '80%'],
                content: '<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">\n' +
                    '    <legend>修改数据字典</legend>\n' +
                    '</fieldset>\n' +
                    '\n' +
                    '<form class="layui-form" action="/dict/update" method="post">\n' +
                    '    <div class="layui-form-item layui-hide">\n' +
                    '        <label class="layui-form-label">id</label>\n' +
                    '        <div class="layui-input-inline">\n' +
                    '            <input type="text" name="id" class="layui-input" value="' + (checkStatus != null ? checkStatus.data[0].id : data.id) + '">\n' +
                    '        </div>\n' +
                    '    </div>' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">字典名称</label>\n' +
                    '        <div class="layui-input-inline">\n' +
                    '            <input type="text" name="dictName" lay-verify="required" lay-reqtext="字典名称是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input" value="' + (checkStatus != null ? checkStatus.data[0].dictName : data.dictName) + '">\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">字典编码</label>\n' +
                    '        <div class="layui-input-inline">\n' +
                    '            <input type="text" name="dictCode" lay-verify="required" lay-reqtext="字典编码是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input" value="' + (checkStatus != null ? checkStatus.data[0].dictCode : data.dictCode) + '">\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">字典描述</label>\n' +
                    '        <div class="layui-input-inline">\n' +
                    '            <input type="text" name="dictDesc" autocomplete="off" class="layui-input" value="' + (checkStatus != null ? checkStatus.data[0].dictDesc : data.dictDesc) + '">\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <div class="layui-input-block">\n' +
                    '            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>\n' +
                    '            <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '</form>'
            });
        }

        function detail(data) {
            layer.open({
                title: '查看',
                type: 1,
                area: ['80%', '80%'],
                content: '<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">\n' +
                    '    <legend>查看数据字典</legend>\n' +
                    '</fieldset>\n' +
                    '\n' +
                    '<form class="layui-form" action="/dict/update" method="post">\n' +
                    '    <div class="layui-form-item layui-hide">\n' +
                    '        <label class="layui-form-label">id</label>\n' +
                    '        <div class="layui-input-inline">\n' +
                    '            <input type="text" name="id" class="layui-input" value="' + data.id + '">\n' +
                    '        </div>\n' +
                    '    </div>' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">字典名称</label>\n' +
                    '        <div class="layui-input-inline">\n' +
                    '            <input type="text" name="dictName" lay-verify="required" lay-reqtext="字典名称是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input" value="' + data.dictName + '">\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">字典编码</label>\n' +
                    '        <div class="layui-input-inline">\n' +
                    '            <input type="text" name="dictCode" lay-verify="required" lay-reqtext="字典编码是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input" value="' + data.dictCode + '">\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">字典描述</label>\n' +
                    '        <div class="layui-input-inline">\n' +
                    '            <input type="text" name="dictDesc" autocomplete="off" class="layui-input" value="' + data.dictDesc + '">\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '</form>'
            });
        }

        // 创建渲染实例
        table.render({
            elem: '#demo'
            , height: 'full-0'
            , url: '/dict/queryJson' //数据接口
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: '15%', sort: true, fixed: 'left', totalRow: '合计：'}
                , {field: 'dictName', title: '字典名称', width: '15%'}
                , {field: 'dictCode', title: '字典编码', width: '15%'}
                , {field: 'dictDesc', title: '字典描述', width: '25%'}
                , {field: 'createTime', title: '创建时间', width: '15%'}
                , {fixed: 'right', title: '操作', width: '15%', align: 'center', toolbar: '#barDemo'}
            ]]
        });

        // 头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    location.href = "/dictAdd";
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        update(checkStatus, null);
                        break;
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        location.href = "/dict/delete/" + checkStatus.data[0].id;
                    }
                    break;
            }
        });

        // 单元格工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                detail(data);
            } else if (layEvent === 'more') {
                //下拉菜单
                dropdown.render({
                    elem: this //触发事件的 DOM 对象
                    , show: true //外部事件触发即显示
                    , data: [{
                        title: '编辑'
                        , id: 'edit'
                    }, {
                        title: '删除'
                        , id: 'del'
                    }]
                    , click: function (menudata) {
                        if (menudata.id === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                location.href = "/dict/delete/" + data.id;
                            });
                        } else if (menudata.id === 'edit') {
                            update(null, data);
                        }
                    }
                    , align: 'right' //右对齐弹出
                    , style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                })
            }
        });
    });
</script>
</body>
</html>
